<template>
  <div class="messageBox">
    <h2>{{title}}</h2>
    <p>{{content}}</p>
    <div>
      <div v-if="cancle" @touchstart="handleCancle">{{cancle}}</div>
      <div v-if="ok" @touchstart="handleOk">{{ok}}</div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
  .messageBox {width: 180px; height: 100px; border: 1px solid #ccc; border-radius: 3px; background-color: white;box-shadow: 3px 3px 3px 3px #ccc; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -90px; z-index: 999}
  .messageBox h2 {text-align: center; line-height: 30px; font-size: 18px;}
  .messageBox p {text-align: center; line-height: 30px;}
  .messageBox > div {display: flex;width: 100%; position:absolute; bottom: 0; border-top: 1px solid #ccc}
  .messageBox > div div {flex: 1; line-height: 30px; border-right: 1px solid #ccc; text-align: center;}
  .messageBox > div div:last-child {border: none}
</style>
